<template>
	<div class="test-videojs">
		<v-touch @swipedown="onPanStart" @swipeup="onPandup" @swipeleft="swipeleft">
			<video id="videoPlayer" ref="videoPlayer" class="video-js vjs-big-play-centered"
				x5-video-player-type="h5-page" x5-video-orientation="landscape|portrait"></video>
		</v-touch>
		<el-drawer :before-close="handleClose" :visible.sync="drawer" :size='300' :with-header="false"
			style="width: 100%;">
			<div class="fixehead">
				换台
			</div>
			<el-collapse v-model="activeName" accordion @change="handleChange()">
				<el-collapse-item v-for="(item,index) in liveData" :key="index" :name="index" v-if="item.hide==false">
					<template slot="title">
            <img v-if="index==0" src="@/assets/images/cc.png" class="mr10">
            <img v-if="index==1" src="@/assets/images/wei.png" class="mr10">
						<img v-if="index==3" src="@/assets/images/new.png" class="mr10">
            <img v-if="index==4" src="@/assets/images/jilu.png" class="mr10">
            <img v-if="index==5" src="@/assets/images/film.png" class="mr10">
            <img v-if="index==6" src="@/assets/images/dou.png" class="mr10">
						{{item.group}}
					</template>
					<ul class="channeul">
						<li v-for="(items,s) in getchannels" @click="changeSource(s,items.name,item.tage,items.a)"
							v-if="items.rock!=0" :class="{'actived':ischeck==s}">

							<el-row>
								<el-col :span="6"><img :src="items.img" style="width: 65px;"></el-col>
								<el-col :span="18" style="padding-left: 10px;">
									<span class="filename">
										{{items.name}}
                    <span v-if="items.h" class="block news">热</span>
                    <span v-if="items.n" class="block hot">新</span>
									</span>
									<div class="loader" v-if="ischeck==s">
										<div class="loader-inner line-scale-pulse-out-rapid">
											<div></div>
											<div></div>
											<div></div>
											<div></div>
											<div></div>
										</div>
									</div>
									<div>
										<el-rate style="display: inline-block;" v-model="items.s/2" :allow-half="true" disabled></el-rate>
										<span style="font-size: 12px;color: #e6a23c;">{{items.s}}</span>
									</div>
									<div style="font-size: 12px;line-height: 14px;color: #dcdfe6;">{{items.brief}}</div>
									<div style="font-size: 12px;line-height: 14px;color: #dcdfe6;">{{items.p}}</div>

								</el-col>
							</el-row>
						</li>
					</ul>
				</el-collapse-item>
			</el-collapse>
		</el-drawer>
		<div class="isShow" ref="isShow" @click="showdrawer()">
			<img draggable="false" src="@/assets/images/fl.png" v-if="fltrue">
			<img draggable="false" v-if="!fltrue" src="@/assets/images/fr.png">
		</div>
		<div v-if="switchsource.length>1 && tage==0"
			style="position: fixed;top:0;color:#fff;font-size: 12px;width: 300px;">
			播放卡顿? 切换其他线路：
			<ul class="sourceUl">
				<li v-for="(item,i) in switchsource" :class="{'isactive':isactive==i}" @click="swsourFc(i)">线路{{i+1}}
				</li>
			</ul>
		</div>
		<div v-if="switchsource.length>1 && tage==1" style="position: fixed;top:0;color:#fff;font-size: 12px;">
			选集：
			<ul class="sourceUl">
				<li v-for="(item,i) in switchsource" :class="{'isactive':isactive==i}" @click="swsourFc(i)">第{{i+1}}集
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	import Videojs from "video.js"; // 引入Videojs
	import liveData from '@/assets/js/tv.js'
	import video_zhCN from 'video.js/dist/lang/zh-CN.json'
	Videojs.addLanguage('zh-CN', video_zhCN);
	let clientHeight = document.documentElement.clientHeight;
	export default {
		data() {
			return {
				nowPlayVideoUrl: "http://pull2.ssws.tv/live/SswsTV20210803.m3u8",
				// nowPlayVideoUrl: "http://213.151.233.20:8000/dna-6233-tv-pc/hls/4004v105.m3u8",
				options: {
					autoplay: true, // 设置自动播放
					muted: false, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）
					preload: "auto", // 预加载
					controls: true, // 显示播放的控件
					height: clientHeight - 70,
					language: 'zh-CN', // 设置语言
				},
				liveData: liveData.data,
				activeName: '0',
				ischeck: 0,
				player: null,
				drawer: false,
				switchsource: [],
				isactive: 0,
				fltrue: true,
				getchannels: [],
				tage: '',
				s: '4'
			};
		},
		mounted() {
			this.getVideo(this.nowPlayVideoUrl);
		},
		methods: {
			getVideo(nowPlayVideoUrl) {
				this.player = Videojs("videoPlayer", this.options);
				//关键代码， 动态设置src，才可实现换台操作
				this.player.src([{
					src: nowPlayVideoUrl,
					type: "application/x-mpegURL", // 告诉videojs,这是一个hls流
				}]);
				this.$refs.videoPlayer.style.height = clientHeight - 70;
			},
			changeSource(index, name, tage,alias) {
				this.ischeck = index;
				document.title = "在线电视直播——正在播放" + name;
				this.isactive = 0;
				this.tage = tage;
        this.getUrl(alias);
			},
			getchan(url) {
				this.axios.get(url).then((res) => {
					this.getchannels = res.data.channels;
					this.getchannels.sort((a, b) => { //根据题号进行排序
						return b.s - a.s;
					});
				})
			},
      getUrl(alias){
        this.axios.get('/static/'+alias+'.json'+'?random=' + new Date().getTime()).then((res) => {
          console.log(res)

        	// this.getchannels = channels;
          this.switchsource = res.data.urls;
          this.nowPlayVideoUrl = this.switchsource[0];
        	// this.getchannels.sort((a, b) => { //根据题号进行排序
        	// 	return b.score - a.score;
        	// });
        })
      },
			handleChange() {
				this.ischeck = -1;
				switch (this.activeName) {
					case 0:
						this.getchan('/static/cctv.json?random=' + new Date().getTime())
						break;
					case 1:
						this.getchan('/static/satellite.json?random=' + new Date().getTime())
						break;
					case 2:
						this.getchan('/static/animation.json?random=' + new Date().getTime())
						break;
					case 3:
						this.getchan('/static/film.json?random=' + new Date().getTime())
						break;
					case 4:
						this.getchan('/static/documentary.json?random=' + new Date().getTime())
						break;
					case 5:
						this.getchan('/static/movies.json?random=' + new Date().getTime())
						break;
					case 6:
						this.getchan('/static/high.json?random=' + new Date().getTime())
						break;
					case 7:
						this.getchan('/static/hk.json?random=' + new Date().getTime())
						break;
					case 8:
						this.getchan('/static/international.json?random=' + new Date().getTime())
						break;
					default:
						break;
				}
			},
			swsourFc(index) {
				this.isactive = index;
				this.nowPlayVideoUrl = this.switchsource[index];
			},
			showdrawer() {
				if (this.$refs.isShow.style.right == "") {
					this.fltrue = false;
					this.drawer = true;
					this.$refs.isShow.style.right = "300px";
				} else if (this.$refs.isShow.style.right == "300px") {
					this.fltrue = true;
					this.drawer = false;
					this.$refs.isShow.style.right = "0px";
				} else if (this.$refs.isShow.style.right == '0px') {
					this.fltrue = false;
					this.drawer = true;
					this.$refs.isShow.style.right = "300px";
				}
			},
			handleClose() {
				this.drawer = false;
				this.fltrue = true;
				this.$refs.isShow.style.right = "0";
			},

			onPanStart() {
				var name = this.liveData[this.activeName].channels[this.ischeck - 1].name;
				var index = this.ischeck - 1;
				var urls = this.liveData[this.activeName].channels[this.ischeck - 1].urls;
				this.changeSource(urls, index, name)
			},
			onPandup() {
				var name = this.liveData[this.activeName].channels[this.ischeck + 1].name;
				var index = this.ischeck + 1;
				var urls = this.liveData[this.activeName].channels[this.ischeck + 1].urls;
				this.changeSource(urls, index, name)
			},
			swipeleft() {
				this.showdrawer()
			}
		},
		watch: {
			nowPlayVideoUrl(newVal, old) {
				this.getVideo(newVal);
			}
		},
		beforeDestroy() {
			if (this.player) {
				this.player.dispose(); // Removing Players,该方法会重置videojs的内部状态并移除dom
			}
		}
	};
</script>
<style>
	body {
		background-color: black;
		moz-user-select: -moz-none;
		-moz-user-select: none;
		-o-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
  .mr10{
    margin-right: 10px;
  }
	/deep/.el-rate {
		display: inline-block;
	}

	#videoPlayer {
		width: 100%;
	}

  .block{
    display: inline-block;
    padding: 0 2px;
        text-align: center;
        vertical-align: middle;
        font-style: normal;
        color: #fff;
        overflow: hidden;
        line-height: 16px;
        height: 16px;
        font-size: 12px;
        border-radius: 4px;
        font-weight: 200;
  }

  .hot{

    background-color: #FF455B;
  }


  .news{
    background-color: #F60;
  }

	.channeul {
		list-style: none;
		padding-left: 10px;
	}

	.channeul>li {
		margin: 18px 0;
		cursor: pointer;
		font-size: 16px;
		color: #f56c6c;
		text-align: left;
		transition: .5s;
	}

	.channeul>li:hover {
		padding-left: 8px;
	}

	.channeul>li:hover .filename {
		color: #67c23a;
	}

	.actived {
		color: #67c23a !important;
	}

	.el-drawer__body {
		padding-top: 42px;
	}

	.el-collapse-item__wrap {
		background: linear-gradient(132deg, rgb(88 88 88 / 58%) 7%, rgb(54 54 54 / 68%) 97%);
		border: 1px solid;
		border-image: linear-gradient(134deg,
				rgba(32, 42, 50, 0.12) 0%,
				rgba(32, 42, 50, 0.09)) 1 1;
		border-radius: 4px;
		backdrop-filter: blur(5px);
	}

	.el-drawer {
		background-color: #fff0;
	}

	.fixehead {
		position: fixed;
		top: 0;
		width: 300px;
		height: 42px;
		line-height: 42px;
		background: #225487;
		z-index: 1000;
		color: #fff;
		font-weight: bold;
	}

	.el-collapse-item__content {
		padding-bottom: 0;
	}

	.el-collapse-item__header {
		padding-left: 20px;
		background-color: #225487;
		border-bottom: 1px solid #909399;
		font-weight: bold;
		color: #f5f7fa;
		backdrop-filter: blur(5px);
		font-family: cursive;
		font-size: 16px;
	}

	.iswhite {
		color: aliceblue;
	}

	::-webkit-scrollbar-track-piece {
		border-radius: 6px;
		background-color: #ccc;
	}

	::-webkit-scrollbar {
		width: 0px;
		height: 6px;
	}

	::-webkit-scrollbar-thumb {
		border-radius: 6px;
		background-color: #4e5a6de3;
		background-clip: padding-box;
		min-height: 28px;
	}

	.isShow>img {
		width: 27px;
	}

	.isShow {
		font-size: 26px;
		position: absolute;
		right: 0;
		top: 0;
		color: white;
		cursor: pointer;
		z-index: 10000;
		transition: .3s;
		/* animation-name: example; */
		animation-timing-function: linear;
		animation-delay: 0s;
		animation-iteration-count: infinite;
		animation-duration: 3s;
		height: 42px;
		width: 60px;
		line-height: 50px;
		background: #409eff87;
	}

	.huantai {
		margin-top: 0;
		font-size: 14px;
	}

	.isShow:hover {
		width: 68px;
	}

	/* 动画代码 */
	@keyframes example {
		0% {
			transform: scale(1.2);
			background-color: #cf580187;
		}

		25% {
			transform: scale(1);
			background: #409eff87;
		}

		50% {
			transform: scale(0.9);
			background-color: #642eb187;
		}

		75% {
			transform: scale(1.1);
			background-color: #642eb187;
		}

		100% {
			transform: scale(1.2);
			background: #409eff87;
		}
	}

	.loader {
		display: inline-block;
		margin-left: 8px;
	}

	.sourceUl {
		display: inline-block;
		list-style: none;
		padding-left: 0;
		text-align: left;
	}

	.sourceUl>li {
		display: inline-block;
		margin-right: 10px;
		margin-bottom: 10px;
		cursor: pointer;
		padding: 2px 8px;
		background: #f56c6c;
		border-radius: 20px;
	}

	.isactive {
		color: #ecf5ff;
		background: #e6a23c !important;
	}

	@-webkit-keyframes line-scale-pulse-out-rapid {
		0% {
			-webkit-transform: scaley(1);
			transform: scaley(1);
		}

		80% {
			-webkit-transform: scaley(0.3);
			transform: scaley(0.3);
		}

		90% {
			-webkit-transform: scaley(1);
			transform: scaley(1);
		}
	}

	@keyframes line-scale-pulse-out-rapid {
		0% {
			-webkit-transform: scaley(1);
			transform: scaley(1);
		}

		80% {
			-webkit-transform: scaley(0.3);
			transform: scaley(0.3);
		}

		90% {
			-webkit-transform: scaley(1);
			transform: scaley(1);
		}
	}

	.line-scale-pulse-out-rapid>div {
		background-color: #fff;
		width: 2px;
		height: 10px;
		border-radius: 2px;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		display: inline-block;
		vertical-align: middle;
		-webkit-animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);
		animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);
	}

	.line-scale-pulse-out-rapid>div:nth-child(2),
	.line-scale-pulse-out-rapid>div:nth-child(4) {
		-webkit-animation-delay: -0.25s !important;
		animation-delay: -0.25s !important;
	}

	.line-scale-pulse-out-rapid>div:nth-child(1),
	.line-scale-pulse-out-rapid>div:nth-child(5) {
		-webkit-animation-delay: 0s !important;
		animation-delay: 0s !important;
	}

</style>
